You said
import React, {
useState, useEffect
} from 'react';
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import './index.css';
const ProductList = () => {
const [cart, setCart] = useState([]);
const [products,setProducts] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
fetchProducts();
}, []);
const fetchProducts = async () => {
try {
const response = await axios.get('http://localhost:5000/product');
setProducts(response.data);
} catch(error) {
console.error('Error:', error);
}
}
const deleteProduct = async(id) => {
try{
await axios.delete(`http://localhost:5000/product/${id}`);
setProducts(products.filter(product => (product._id || product.id) !== id));
} catch (error) {
console.error('Delete error:', error);
}
};
const addToCart = (product) => {
setCart(prevCart => {
const alreadyInCart = prevCart.find(item => item._id === product._id || item.id === product.id);
if (alreadyInCart) return prevCart;
return [...prevCart, product];
});
};
const [filteredProducts, setFilteredProducts] = useState([]);
const [selectedCategory, setSelectedCategory] = useState('');
const handleSearch = () => {
console.log('Searching for:', searchQuery);
const filtered = products.filter(product =>
product.name.toLowerCase().includes(searchQuery.toLowerCase()) && (selectedCategory === '' || product.category === selectedCategory)
);
setFilteredProducts(filtered);
};
useEffect(() => {
const delayDebounce = setTimeout(() => {
handleSearch();
}, 500);
return () => clearTimeout(delayDebounce);
}, [searchQuery, selectedCategory]);
useEffect(() => {
setFilteredProducts(products);
}, [products]);
{filteredProducts.map((product, index) => (
<products />
))}
return(
<div className='container'>
<h2>Products</h2>
<div className='search-container'>
<input
type='text'
placeholder='Search products...'
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
className='search-bar'
/>
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className='category-dropdown'
aria-label='Filter by category'
>
<option value=''>All Categories</option>
<option value='Electronics'>Electronics</option>
<option value='Clothing'>Clothing</option>
<option value='Food'>Food</option>
<option value='Cosmetic'>Cosmetics</option>
</select>
<button className='search-icon' onClick={handleSearch} aria-label='Search products'>
<FontAwesomeIcon icon={faSearch} />
</button>
</div>
<p className='result-count'>{filteredProducts.length} products found</p>
<div className='product-list'>
{Array.isArray(filteredProducts) && filteredProducts.length > 0 ? (filteredProducts.map((product, index) => (
<div key={product._id || product.id || index} className='product'>
<h3>{product.name}</h3>
<img src={product.imageUrl} alt= {product.name} className='product-image'/>
<p className='product-description'>
Description: {product.description}
</p>
<p className='product-price'>
Price: ${product.price}
</p>
<p className='product-category'>
Category: {product.category}
</p>
{((index + 1) % 3 === 0) && (<hr key={index} className='break-line' />)}
<button onClick={() => addToCart(product)}>
<span role='img' aria-label='cart'>🛒</span>Add to Cart</button>
<button className='like-btn'>❤</button>
<button onClick={() => deleteProduct(product._id || product.id)}>Delete</button>
</div>
))
) : (
<p>No product found</p>
)}
</div>
<div className='cart'>
<h3>Cart ({cart.length} items)</h3>
{cart.map((item, index) => (
<p key={item._id || item.id || index}>{item.name} - ${item.price}</p>
))}
</div>
</div>
);
}
export default ProductList; how can l add the professional like, add to cart button and delete button using icons only and make the content text to show when the icon is hovered
.7c0a85b7-91ed-49c1-962e-9ef672922465.png)
.a8bb3d7d-936b-41c0-8c15-8369d8e5107f.png)